import React, { useState, useEffect } from 'react';
import styles from './index.module.scss';

import { useParams } from 'ice';

import { Form, Input, Switch } from '@alifd/next';

// 获取api
import { getDeviceInfo } from '../../services/deviceInfo.js';

const GeneralTab = (props) => {
    console.log('general rowdata', props.rowData)
    const ID = useParams().id;

    let [data, onData] = useState({}),
        [staticData, onStaticData] = useState({});

    let onDevice = props.onDevice;

    useEffect(()=>{
        getDeviceInfo(ID).then(result => {
            console.log('result', result);
            if(result.code == 200) {
                onData({
                    name: !!result.msg[0] ? result.msg[0].name : 'Device Name',
                    description: !!result.msg[0] ? result.msg[0].description : 'Device Description',
                    isApproved: !!result.msg[0] ? result.msg[0].isApproved : false,
                });
                onStaticData({
                    hostname: !!result.msg[0] ? result.msg[0].hostname : 'Host Name',
                    ipList: !!result.msg[0] ? result.msg[0].ipList : 'IP List',
                    machineId: !!result.msg[0] ? result.msg[0].machineId : 'Machine ID',
                    versions: !!result.msg[0] ? result.msg[0].versions.agent : 'Device Version',
                })
            }
        })
    },[]);

    const handleChange = ( v, e, k ) => {
        data[k] = v;
        onData({...data})
        if(k == 'isApproved') {
            onDevice(a=> {
                return {
                    ...a,
                    isApproved: v
                }
            })
        }
    };

    const handleBlur = ( e ) => {
        onDevice(a=> {
            return {
                ...a,
                ...data
            }
        })
    }
    // 表单配置
    const formConfig = [
        {
            label: 'Device Name',
            content: <Input value={data.name} onChange={(v,e)=>handleChange(v,e,'name')} onBlur={handleBlur} />
        },
        {
            label: 'Description',
            content: <Input value={data.description} onBlur={handleBlur} onChange={(v,e)=>handleChange(v,e,'description')}/>
        },
        {
            label: 'Approved',
            content: <Switch checked={data.isApproved} onChange={(v,e)=>handleChange(v,e,'isApproved')}/>
        },
        {
            label: 'Host Name',
            content: <Input disabled readOnly value={staticData.hostname}/>
        },
        {
            label: 'IP List',
            content: <Input disabled readOnly value={staticData.ipList}/>
        },
        {
            label: 'Machine ID',
            content: <Input disabled readOnly value={staticData.machineId}/>
        },
        {
            label: 'Device Version',
            content: <Input disabled readOnly value={staticData.versions}/>
        },
    ];

    return ( 
        <Form labelTextAlign="left" labelCol={{span: 6}} style={{width: '50%'}}>
            {
                formConfig.map((item,i) => {
                    return (
                        <Form.Item key={i} label={item.label}>
                            {item.content}
                        </Form.Item>
                    )
                })
            }
        </Form>
    )
};

export default GeneralTab;